<template>
	<view class="navbar">
		<!-- 顶部导航 -->
		<view @click="back()">取消</view>
		<view >密码修改</view>
		<view :style="{color:'#4e7fff'}" @click="submit()">保存</view>
	</view>
	<view class="newPassword">
		<view class="npassword">新密码</view>
		<up-input
		placeholder="字母数字混合至少8位"
		border="bottom"
		:focus="true"
		v-model="npassword"
		></up-input>
	</view>
	<view class="repeatPassword">
		<view class="rpassword">重置密码</view>
		<up-input
		placeholder="重复输入一次新密码"
		border="bottom"
		:password="true"
		v-model="rpassword"
		></up-input>
	</view>
</template>

<script setup>
import {ref} from 'vue'

let npassword = ref('')
let rpassword = ref('')

// 提交表单
const submit = () => {
	// 判断两次密码是否一致
	if(npassword.value !== rpassword.value) {
		uni.showToast({
			title: '两次密码不一致',
			duration: 2000
		});
	}else {
		uni.showToast({
			title: '成功',
			duration: 2000,
			success() {
				uni.navigateBack({
					url:'pages/index/index'
				})
			}
		});
		
	}
}

// 页面跳转回去
const back = () => {
	uni.navigateBack({
		url:'pages/index/index'
	})
}
</script>

<style lang="scss">
.navbar {
	height: 88rpx;
	padding: 0 20rpx;
	display: flex;
	justify-content: space-between;
}
.newPassword {
	margin: 20rpx 0 40rpx;
	.npassword{
		padding-left: 20rpx;
	}
}
.repeatPassword {
	.rpassword{
		padding-left: 20rpx;
	}
}
</style>
